<template>
	<view style="background-color: #fff;height: 95vh;">
		
		<view class="home">
			<u-form :model="form" ref="uForm"> 
				<u-form-item label-width="200" label="活动封面:"><u-upload :action="action" ref="uUpload" max-count="1" :header="headers" @on-success="successful"></u-upload></u-form-item>
				<u-form-item prop="name" label-width="200" label="活动标题:"><u-input v-model="form.name" /></u-form-item>
				<u-form-item prop="startTime" label-width="200" label="开始时间:"><u-input @click="Dkai" v-model="form.startTime" /></u-input></u-form-item>
				<u-form-item prop="endTime" label-width="200" label="结束时间:"><u-input @click="endshow = true" v-model="form.endTime" /></u-input></u-form-item>
				<u-form-item prop="location" label-width="200" label="活动地址:"><u-input @click="region = true" v-model="form.location" /></u-input></u-form-item>
				<u-form-item label-width="200" label="活动总人数:"><u-number-box v-model="form.totalNumber"></u-number-box></u-form-item>
				<u-form-item label-width="200" label="报名费用:"><u-number-box v-model="form.price"></u-number-box></u-form-item>
				<u-form-item prop="details" label-width="200" label="活动详情:"><u-input v-model="form.details" /></u-form-item>
				<!-- 时间选择 -->
				<u-picker mode="time" v-model="show" @confirm="DataPick" :params="params"></u-picker>
				<u-picker mode="time" v-model="endshow" @confirm="EndDataPick" :params="params"></u-picker>
				<u-picker mode="region" v-model="region" @confirm="regionDataPick" :params="Areparams"></u-picker>
			</u-form>
		</view>
		<view>
			<u-toast ref="uToast" />
		</view>
		<!-- 底部发布按钮 -->
		<view style="position: fixed;left: 0;bottom: 51px;background-color: #fff;width: 100%;height: 40px;padding:4px;z-index: 10;">
			<view style="display: flex;flex-direction: row-reverse;">
				<view style="margin-right: 20px;width: 90%;">
					<u-button :ripple="true" size="medium" shape="circle" type="primary" @click="save">发布</u-button>
				</view>
			</view>
		</view>
	
	</view>
</template>

<script>
	import { getToken } from '@/utils/auth'
	import { postActivityList } from '../../api/publish/api'
	export default{
		data(){
			return {
				action: 'http://127.0.0.1:6680/maincode/activity/uploadImages',
				headers:{
					'Authorization':'Bearer ' + getToken()
				},
				show:false,
				endshow:false,
				form: {
					cover:'',
					name: '',
					details:'',
					startTime:'',
					endTime:'',
					location:'',
					totalNumber:0,
					price:0
				},
				params:{
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
				Areparams:{
					province: true,
					city: false,
					area: false
				},
				region:false,
				rules:{
					name:{required: true, message: '请输写活动标题', trigger: ['change','blur'], },
					details:{required: true, message: '请填写活动详情', trigger: ['change','blur'], },
					startTime:{required: true, message: '请选择开始时间', trigger: ['change','blur'], },
					endTime:{required: true, message: '请选择结束时间', trigger: ['change','blur'], },
					location:{required: true, message: '请选择活动地址', trigger: ['change','blur'], },
					// peopele:{required: true, message: '请填写活动总人数', trigger: ['change','blur'], },
					// price:{required: true, message: '请填写报名费用', trigger: ['change','blur'], },
				}
			}
		},
		methods:{
			Dkai(){
				this.show = true
			},
			DataPick(e){
				this.form.startTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}`
			},
			EndDataPick(e){
				this.form.endTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}`
			},
			regionDataPick(e){
				console.log(e)
				this.form.location = e.province.label
			},
			save(){
				
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						postActivityList({
							...this.form,
							status:'1',
							delFlag:'0',
							recFlag:'1'
						}).then(res => {
							this.form = {
								cover:'',
								name: '',
								details:'',
								startTime:'',
								endTime:'',
								location:'',
								totalNumber:0,
								price:0
							}
							this.clearImg()
							this.showToast('发布成功','success')
						})
					} else {
						this.showToast('请填写表格数据','error')
					}
				});

			},
			showToast(msg,type) {
				this.$refs.uToast.show({
					title: msg,
					type: type,
				})
			},
			successful(e){
				this.form.cover = e.data
			},
			clearImg(){
				this.$refs.uUpload.clear()
			}
		},
		onLoad(){

		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
		
	}
</script>

<style>
	.home{
		padding: 0 10px;
	}
	/deep/.u-size-medium{
		width: 100%;
	}
</style>